<template>
  <div class="commissionTemplateListComponent" v-if="oItem">
    <div
      class="content"
      :style="{
        marginTop: oItem.main.contentPaddingTop + 'px',
        marginBottom: oItem.main.contentPaddingBottom + 'px',
        marginLeft: oItem.main.contentPaddingLR + 'px',
        marginRight: oItem.main.contentPaddingLR + 'px',
        backgroundColor: oItem.main.spaceColor,
      }"
    >
      <div
        class="item"
        v-for="l in list"
        :key="l.id"
        :style="{
          backgroundColor: oItem.main.bgColor,
          backgroundImage: 'url('+oItem.main.bgImg+')',
          borderTopLeftRadius: oItem.main.contentBorderRadiusTop + 'px',
          borderTopRightRadius: oItem.main.contentBorderRadiusTop + 'px',
          borderBottomLeftRadius: oItem.main.contentBorderRadiusBottom + 'px',
          borderBottomRightRadius: oItem.main.contentBorderRadiusBottom + 'px',
        }"
      >
        <div class="left">
          <span class="tit">模板名称</span>
          <span class="val" :style="{ color: oItem.main.fontColor }">{{ l.name }}</span>
        </div>
        <div class="right">
          <div class="l" :class="'style' + oItem.main.style">
            <span class="tit">创建时间</span>
            <span class="val">{{ l.createTime }}</span>
          </div>
          <div class="r" :class="'style' + oItem.main.style">
            <div class="style1" v-if="oItem.main.style == 1">
              <span
                :style="{
                  backgroundColor: oItem.main.btnBgColor,
                  color: oItem.main.btnFontColor,
                }"
                >编辑</span
              >
              <span
                class="show"
                :style="{
                  backgroundColor: oItem.main.btnBgColor,
                  color: oItem.main.btnFontColor,
                }"
                >查看</span
              >
              <span
                :style="{
                  backgroundColor: oItem.main.btnBgColor,
                  color: oItem.main.btnFontColor,
                }"
                >删除</span
              >
            </div>
            <div class="style2" v-if="oItem.main.style == 2">
              <span>
                <i class="bg" :style="{ backgroundColor: oItem.main.iconColor }"></i>
                <i
                  class="icon"
                  :class="oItem.main.editIcon"
                  :style="{ color: oItem.main.iconColor }"
                ></i>
              </span>
              <span class="show">
                <i class="bg" :style="{ backgroundColor: oItem.main.iconColor }"></i>
                <i
                  :class="oItem.main.seeIcon"
                  :style="{ color: oItem.main.iconColor }"
                ></i>
              </span>
              <span>
                <i class="bg" :style="{ backgroundColor: oItem.main.iconColor }"></i>
                <i
                  :class="oItem.main.delIcon"
                  :style="{ color: oItem.main.iconColor }"
                ></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "commissionTemplateListComponent",
  data() {
    return {
      list: [
        { id: 1, name: "佣金模板1", createTime: "2022-03-10" },
        { id: 2, name: "佣金模板2", createTime: "2022-03-10" },
        { id: 3, name: "佣金模板3", createTime: "2022-03-10" },
        { id: 4, name: "佣金模板4", createTime: "2022-03-10" },
        { id: 5, name: "佣金模板5", createTime: "2022-03-10" },
      ],
      oItem: null,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.commissionTemplateListComponent {
  display: flex;
  .content {
    display: flex;
    flex-direction: column;flex: 1;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 10px 20px 20px;
      background-color: #fff;
      margin-top: 15px;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      &:first-child {
        margin-top: 0;
      }
      .left {
        width: 30%;
        display: flex;
        flex-direction: column;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          right: 0;
          top: 0px;
          z-index: 2;
          width: 1px;
          height: 100%;
          background-color: #eee;
        }
        .tit {
          color: #929292;
          font-size: 14px;
          margin-bottom: 10px;
        }
        .val {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 16px;
          color: #4363ea;
        }
      }
      .right {
        width: 65%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .l {
          display: flex;
          flex-direction: column;
          &.style1 {
            width: 75%;
            padding-left: 10%;
            box-sizing: border-box;
          }
          &.style2 {
            width: 45%;
            padding-left: 6%;
            box-sizing: border-box;
          }
          .tit {
            color: #929292;
            font-size: 14px;
            margin-bottom: 10px;
          }
          .val {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 16px;
          }
        }
        .r {
          &.style1 {
            width: 25%;
          }
          &.style2 {
            width: 45%;
          }
          .style1 {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;padding-right:5px;
            span {
              font-size: 12px;
              background-color: #4363ea;
              color: #fff;
              padding: 2px 5px;
              border-radius: 20px;
              display: flex;
              cursor: pointer;
              align-items: center;
              box-shadow: 3px 3px 3px rgba(67, 99, 234, 0.2),
                -3px 3px 3px rgba(67, 99, 234, 0.2);
            }
            .show {
              margin: 10px 0;
            }
          }
          .style2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            span {
              width: 24px;
              height: 24px;
              display: flex;
              justify-content: center;
              position: relative;
              cursor: pointer;
              align-items: center;
              .bg {
                background-color: #feefee;
                opacity: 0.1;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 2;
                border-radius: 100%;
              }
              .icon {
                color: #ed5246;
                font-size: 16px;
                position: absolute;
                z-index: 3;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
            .show {
              margin: 0 10px;
            }
          }
        }
      }
    }
  }
}
</style>
